let nameObj,jobObj,moneyObj,dataObj;
//正在变色的tr
let colorTr = null;
let delObj = null;
window.onload = function () {
    //姓名文本框
    nameObj = document.getElementById("name");
    //职位文本框
    jobObj = document.getElementById("job");
    //工资文本框
    moneyObj = document.getElementById("money");
    //表格tbody数据
    dataObj = document.getElementById("data");
    //删除按钮
    delObj = document.getElementById("delButton");

    //得到tbody中所有 tr元素集合
    let trArray = dataObj.getElementsByTagName("tr");
    for(let i = 0;i<trArray.length;i++){
        trArray[i].onclick = function () {
            trClick(this);
        }
    }
}

//点击行变色
function trClick(trObj) {
    if(colorTr != null){
        colorTr.style.backgroundColor = "white";
    }
    trObj.style.backgroundColor = "yellow";
    colorTr = trObj;
    delObj.disabled = false;

    //得到点中行的td元素集合
    var tdArray = colorTr.getElementsByTagName("td");
    nameObj.value = tdArray[0].innerHTML;
    jobObj.value = tdArray[1].innerHTML;
    moneyObj.value = tdArray[2].innerHTML;
}

//添加
function add() {
    //创建tr标签对象
    var trObj = document.createElement("tr");
    trObj.innerHTML = `<td>${nameObj.value}</td><td>${jobObj.value}</td><td>${moneyObj.value}</td>`;
    trObj.onclick = function(){
        trClick(this);
    }
    //在父节点中追加子节点
    dataObj.appendChild(trObj);
}

//删除
function del() {
     dataObj.removeChild(colorTr);
    delObj.disabled = true;
}

//删除所有
function delAll() {
    // dataObj.innerHTML = "";
    var trArray = dataObj.getElementsByTagName("tr");
    for(var i=0;i<trArray.length;i++){
        dataObj.removeChild(trArray[i]);
        i--;
    }
}

function update() {
    //得到选中行td元素集合
    var tdArray = colorTr.getElementsByTagName("td");
    tdArray[0].innerHTML = nameObj.value;
    tdArray[1].innerHTML = jobObj.value;
    tdArray[2].innerHTML = moneyObj.value;
}